<template>
  <div id="container"></div>
</template>
  <script>
import axios from "axios";
var center = null;
var map = null;
var marker = null;
export default {
  props: ["longitude", "latitude"],
  data() {
    return {};
  },
  mounted() {
    // longitude 经度   jjj
    // latitude 纬度    www
    // 3开头纬度 1开通经度
    // this.initMap(104.244104,30.589892);
    // this.loadScript();
    // this.addMapMarker(104.244104,30.589892);
    if (this.latitude && this.longitude) {
      console.log(this.latitude,this.longitude)
      this.initMap( this.longitude,this.latitude);
      this.loadScript();
      this.addMapMarker( this.longitude,this.latitude);
    } else {
      this.initMap(104.244104, 30.589892);
      this.loadScript();
      this.addMapMarker(104.244104, 30.589892);
    }
  },
  methods: {
    // 修改地图标记
    setMapMarker(longitude, latitude) {
      console.log('执行setMapMarker')
      marker.updateGeometries([
        {
          id: "1",
          position: new TMap.LatLng(latitude, longitude),
        },
      ]);
    },
    // 添加地图标记
    addMapMarker(longitude, latitude) {
      marker.add([
        {
          id: "1", //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
          position: new TMap.LatLng(latitude, longitude), //点标记坐标位置
        },
      ]);
    },
    // 更新地图位置
    setMap(longitude, latitude) {
      console.log('执行setMap')

      map.setCenter(new TMap.LatLng(latitude, longitude));
      // console.log(center, "center");
      // console.log(map, "map");
    },
    //地图初始化函数，本例取名为init，开发者可根据实际情况定义
    initMap(longitude, latitude) {
      // console.log(latitude, longitude);
      //定义地图中心点坐标
      center = new TMap.LatLng(latitude, longitude);
      //定义map变量，调用 TMap.Map() 构造函数创建地图
      map = new TMap.Map(document.getElementById("container"), {
        center: center, //设置地图中心点坐标
        zoom: 11, //设置地图缩放级别
        rotation: 45, //设置地图旋转角度
      });

      //初始化marker图层
      marker = new TMap.MultiMarker({
        map: map,
        styles: {
          // 点标记样式
          marker: new TMap.MarkerStyle({
            width: 20, // 样式宽
            height: 30, // 样式高
            anchor: { x: 10, y: 30 }, // 描点位置
          }),
        },
        geometries: [
          // 点标记数据数组
          {
            // 标记位置(纬度，经度，高度)
            position: center,
            id: "1",
          },
        ],
      });
      //监听点击事件添加marker
      map.on("click", (evt) => {
        const longitude = evt.latLng.lng;
        const latitude = evt.latLng.lat;
        this.setMapMarker(longitude, latitude);
        this.$emit("clickMap", evt);
      });
    },
    // 异步加载API：
    loadScript() {
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.src =
        "https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&callback=initMap";
      document.body.appendChild(script);
    },
    //根据地址获取信息
    getLal(query) {
      // console.log(query,'子query');
      this.$jsonp(`https://apis.map.qq.com/ws/place/v1/search`, {
        keyword: query,
        key: "I52BZ-YXRL5-RNIIU-IISU7-ZVMUV-OJBEP", // 你的key
        // boundary: "region('成都',1,30.589892,104.244104)",
        boundary: "nearby(30.589892,104.244104,10000)",
        output: "jsonp",
      })
        .then((res) => {
          this.$emit("postlocation", res);
          // console.log(res)
        })
        .catch((err) => {
          // console.log(err)
        });
    },
  },
};
</script>
 
<style>
#container {
  /*地图(容器)显示大小*/
  width: 500px;
  height: 400px;
}
</style>